<template>
  <view class="feedback-container">
    <!-- 联系我们 -->

    <!-- 页面标题 -->
    <!-- <view class="header">
			<text class="title">问题反馈</text>
		</view> -->

    <!-- 问题描述输入框 -->
    <view class="form-item">
      <text class="label">问题描述</text>
      <textarea
        v-model="feedbackContent"
        placeholder="请详细描述您的问题"
        class="input-textarea"
        maxlength="500"
      ></textarea>
      <text class="word-count">{{ feedbackContent.length }}/500</text>
    </view>

    <!-- 联系方式输入框 -->
    <!-- 	<view class="form-item">
			<text class="label">联系方式</text>
			<input v-model="contactInfo" placeholder="请输入您的联系方式（手机/邮箱）" class="input" />
		</view> -->

    <!-- 提交按钮 -->
    <view class="submit-btn" @click="submitFeedback">
      <text class="btn-text">提交反馈</text>
    </view>

    <!-- 提示信息 -->
    <view v-if="message" class="message">
      <text>{{ message }}</text>
    </view>
  </view>
</template>

<script>
import globalFunc from "@/mixins/globalFunc.js";
import { feedbackAdd } from "@/common/api/index.js";
export default {
  data() {
    return {
      feedbackContent: "", // 问题描述
      contactInfo: "", // 联系方式
      message: "", // 提示信息
    };
  },
  mixins: [globalFunc],
  async onShow() {
    this.list1 = await this.banner("contact_page");
  },
  methods: {
    // 提交反馈
    async submitFeedback() {
      if (!this.feedbackContent) {
        this.message = "问题描述不能为空";
        return;
      }
      // if (!this.contactInfo) {
      // 	this.message = "联系方式不能为空";
      // 	return;
      // }

      // 模拟提交到服务器
      this.message = "提交中...";
      let formData = {
        content: this.feedbackContent,
      };
      let res = await feedbackAdd(formData);
      console.log("res", res);
      if (res.code == 1) {
        this.message = res.msg;
        this.feedbackContent = "";
        // this.contactInfo = "";
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/mine/mine",
          });
        }, 2000);
      } else {
        this.showMsg(res.msg);
      }
    },
  },
};
</script>

<style scoped>
.topNav {
  background-color: #fff;
  border-radius: 50rpx;
}

.feedback-container {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.form-item {
  margin-bottom: 20px;
}

.label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  display: block;
}

.input-textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.word-count {
  font-size: 12px;
  color: #999;
  text-align: right;
  display: block;
  margin-top: 4px;
}

.submit-btn {
  background-color: #007aff;
  padding: 12px;
  border-radius: 4px;
  text-align: center;
  margin-top: 20px;
}

.btn-text {
  color: #fff;
  font-size: 16px;
}

.message {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #f00;
}
</style>
